<template>
  <div>
    <el-container
      v-for="item of list"
      :key="item.id"
      v-if="item.state === tag"
      style="height: auto;width: 100%;border: 1px solid #eee;display: flex">
      <el-main style="width: 38%;display: flex;height: 100%">
        <el-button-group class="checkIconStyle">
          <el-button type="primary" icon="el-icon-edit" @click="handleEditProject(item.id, item.name)"></el-button>
          <el-button type="primary" icon="el-icon-check" @click="handleOKProject(item.id, item.name)"></el-button>
        </el-button-group>
      </el-main>
<!--      <el-main style="width:auto;display: flex;height: 100%">-->
<!--        <span>-->
<!--          <svg class="icon projectIcon" aria-hidden="true">-->
<!--            <use xlink:href="#icon-"></use>-->
<!--          </svg>-->
<!--        </span>-->
<!--      </el-main>-->
      <el-main style="width:62%;display: flex;height: 100%"  @click.native="handleEditProject(item.id, item.name)">
        <span>
            {{item.name}}
          </span>
      </el-main>
    </el-container>
<!--    <div v-for="item of list" :key="item.id" v-if="item.state === tag">-->
<!--      <div class="row">-->
<!--        <el-button-group class="checkIconStyle">-->
<!--          <el-button type="primary" icon="el-icon-edit" @click="handleEditProject(item.id, item.name)"></el-button>-->
<!--          <el-button type="primary" icon="el-icon-check" @click="handleOKProject(item.id, item.name)"></el-button>-->
<!--        </el-button-group>-->
<!--        <span class="pName" @click="handleEditProject(item.id, item.name)">-->
<!--          <svg class="icon projectIcon" aria-hidden="true">-->
<!--            <use xlink:href="#icon-"></use>-->
<!--          </svg>-->
<!--          {{item.name}}-->
<!--        </span>-->
<!--      </div>-->
<!--      <el-divider></el-divider>-->
<!--    </div>-->
    <el-dialog
      title="提示"
      :visible.sync="okProject"
      width="70%">
      <span>确定通过《{{pname}}》的审核吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okProject = false">取 消</el-button>
        <el-button type="primary" @click="OKProject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios'
export default {
  name: 'list',
  data () {
    return {
      okProject: false,
      list: [],
      pname: '',
      pid: Number,
      tag: this.TaskWaitForCheck
    }
  },
  methods: {
    getProjectList () {
      axios.get(this.url + '/project/manager/' + Cookies.get('id'))
        .then(this.getProjectListSucc)
    },
    getProjectListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.list = res
      }
    },
    handleOKProject (pid, pname) {
      this.okProject = true
      this.pname = pname
      this.pid = pid
    },
    handleEditProject (pid, pname) {
      sessionStorage.setItem('pname', pname)
      sessionStorage.setItem('pid', pid)
      sessionStorage.setItem('activeMenu', '1')
      this.$router.push('/checkProjectDetail')
    },
    OKProject () {
      this.$axios({
        method: 'put',
        url: this.url + '/project/',
        data: {
          id: this.pid,
          state: this.Run
        }
      }).then((res) => {
        if (res.status === 200) {
          alert('审核成功！')
          axios.get(this.url + '/project/manager/' + Cookies.get('id'))
            .then(this.getProjectListSucc)
          this.okProject = false
        }
      }).catch((err) => {
        alert(err)
      })
    }
  },
  mounted () {
    this.getProjectList()
  }
}
</script>

<style lang="stylus" scoped>
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .taskIcon
    color #16b0ff
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
  .fuzerenIcon
    margin-right .3rem
  .projectIcon
    font-size 26px
    margin-right: .3rem
</style>
